import React, {Component} from 'react';
import {Row, Col, Typography, Card, Space, Skeleton } from 'antd';
import {RingProgress} from '@ant-design/plots';
import '../xxx.css'
import {ProgressCircle} from "@/services/Province/Dashboard";


const {Text} = Typography

class ProgressCharts extends Component {

  colorList = [
    {
      id:1,
      color:'#D1E9FC'
    },
    {
      id:2,
      color:'#D0F2FF'
    },
    {
      id:3,
      color:'#FFD9EC'
    },
    {
      id:4,
      color:'#F1E1FF'
    },
    {
      id:5,
      color:'#C4E1FF'
    },
    {
      id:6,
      color:'#B0E0E6'
    },
    {
      id:7,
      color:'#C3D5FF'
    },
    {
      id:8,
      color:'#D1C4E9'
    }
  ]

  state = {
    data: [],
    loading: true
  }

  componentDidMount() {
    ProgressCircle({}).then(res => {
      if (res.status === 0) {
        this.setState({data: res.data, loading: false})
      }
    })
  }

  render() {
    const data = this.state.data
    const color = this.colorList
    console.log('@颜色列表',color)
    return (
      <>
        {/*<Space direction="vertical" size="middle" style={{display: 'flex',height:'460px',width:'60%',borderRadius:'20px',overflow:'hidden'}} >*/}
        <Space direction="vertical" size="middle" style={{display: 'flex',borderRadius:'20px',overflow:'hidden'}} >
          {/*学科进展表格2样式*/}
          <Card title="双一流学科建设完成进度" bordered={false} >
            <Row gutter={24}>
              {
                data.map((item, id) => {
                  let color = null
                  for (const iterator of this.colorList)
                  {
                    if (iterator.id == item.id)
                    {
                      color = 'rgba(222,222,222,0.25)'
                    }
                  }
                  return (
                    // 每个item所占宽度
                    <Col key={id} span={6}>
                    <Card key={id}  headStyle={{fontWeight: 'bold'}}  className='finish'  size="small" title={item.name} bordered={true}  style={{margin: 10,borderRadius:'10px',background:color,overflow:'hidden'}}>
                      {/*完成度一栏相关*/}
                      <Row justify="space-around" align="middle">
                        <Col span={12}>
                          <Space direction="vertical" size={1}>
                            <Text style={{maxHeight: '36px', lineHeight: '18px',display: "block", fontSize: '15px', fontWeight: 'bold'}}>{item.discipline}</Text>
                            <Text style={{fontSize: 32, fontWeight: "bold"}}>{item.progress}%</Text>
                          </Space>
                        </Col>
                        <Col span={12}>
                          {/*百分比的图*/}
                          <RingProgress height={90}
                          width={90}
                          innerRadius={0.6}
                          autoFit={false}
                          percent={item.progress / 100}
                          color={['#1890ff', '#E8EDF3']}
                          statistic={{
                            title: false,
                            content: false,
                          }}/>
                        </Col>
                      </Row>
                    </Card>
                  </Col>)
                })
              }
              <Skeleton loading={this.state.loading} active paragraph={{ rows: 10 }}/>
            </Row>
          </Card>
        </Space>
      </>
    );
  }
}

export default ProgressCharts;
